<template>
  <div class="keep-view" ref="viewBox">
    <keep-alive include="keepOne">
      <componentIndex></componentIndex>
    </keep-alive>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
import componentIndex from "../component/index.vue";
export default {
  components: {
    componentIndex, //component 组件适合keepalive组件
  },
  data() {
    return {
      isKeep: "keepOne",
      saveScrollTop: 0,
    };
  },
  watch: {
    $route(to, from) {
      if (from.meta && from.meta.toBack) {
        this.saveScrollTop = this.$refs.viewBox.scrollTop;
      }
      if (to.meta && to.meta.toBack) {
        this.$nextTick(() => {
          this.$refs.viewBox.scrollTo(0, this.saveScrollTop);
        });
      }
    },
  },
  mounted() {},
  methods: {},
};
</script>
<style  lang="scss">
.keep-view {
  height: 100%;
  overflow: auto;
}
</style>